<!--
 * @Author: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @Date: 2022-09-13 18:49:42
 * @LastEditors: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @LastEditTime: 2022-09-19 16:02:00
 * @FilePath: \郭招娣\app\src\views\Comment.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
     <el-card class="title-card" shadow="always">
      <div class="card-item">
        类型:<el-input
          placeholder="请输入文章标题"
          style="width: 200px"
        />
         搜索词:<el-input
          v-model="formInline.name"
          placeholder="请输入文章标题"
          style="width: 200px"
        />
        搜索量:<el-input
          v-model="formInline.num"
          placeholder="请输入文章标题"
          style="width: 200px"
        />
        
      </div>
      <div class="btns">
        <el-button type="primary" @click="searchChange">搜索</el-button>
        <el-button>重置</el-button>
      </div>
    </el-card>
    <el-card class="box-card">
        <!--按钮组 -->
       <div v-if="multipleSelection.length">
          <el-popconfirm
            confirm-button-text="确定"
            cancel-button-text="取消"
            :icon="InfoFilled"
            icon-color="orange"
            title="确认删除这个文章？"
            @confirm="chooseDeleteSearchLists"
          >
            <template #reference>
              <el-button plain type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </div>
      <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="60" />

         <el-table-column prop="name" label="搜索词" width="250" />
      
        <el-table-column prop="num" label="搜索量" width="180">
          <template #default="scope">
            <el-popover
              effect="light"
              trigger="hover"
              placement="top"
              width="auto"
            >
              <template #default>
                <div>喜欢数: {{ scope.row.num }}</div>
              </template>
              <template #reference>
                <el-tag>{{ scope.row.num }}</el-tag>
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="日期" width="300" />
        <el-table-column fixed="right" label="操作" width="250">
          <template #default="scope">
          
            <el-popconfirm
              confirm-button-text="确定"
              cancel-button-text="取消"
              :icon="InfoFilled"
              icon-color="orange"
              title="确认删除这个文章？"
              @confirm="handleDelete(scope.row)"
            >
              <template #reference>
                <el-button link size="small" type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="
          display: flex;
          align-items: center;
          justify-content: flex-end;
          margin-top: 10px;
        "
        small
        background
        :page-size="pageSize"
        :page-sizes="[1, 2, 3, 4]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>

<script>
import { ElMessage ,InfoFilled} from "element-plus";

import { mapMutations } from "vuex";
// 获取后端数据
import {
  asyncSearchLists,
  asyncDeleteSearchLists,
  asyncChooseDeleteSearchLists,
} from "../api/search";
import { RefreshLeft } from "@element-plus/icons-vue";
export default {
   components: {
    RefreshLeft,
  },
 data() {
    return {
      // 面包屑
      breadList: [],
      // 多选数组
      multipleSelection: [],
      //   文章数据
      tableData: [],
      isHidden: false,
      formInline:{
        name:'',
        num:''
      },
      option:['已发布','草稿'],
      // 新建还是添加
      pageCode: 1,
      pageSize: 4,
      total: 0,
    };
  },
  created() {
    this.init();
    this.getSearchLists();

  },
  methods: {
    ...mapMutations({
      getBreadList: "getBreadList",
      getWorkbench: "getWorkbench",
    }),
    // 初始化页面
    init() {
      this.getBreadList({ breadList: this.$route.meta.breadList });
      this.getWorkbench({ workbench: false });
    },
      // 请求数据方法
    async getSearchLists() {
     
      const res = await asyncSearchLists("/searchLists", {
        pageCode: this.pageCode,
        pageSize: this.pageSize,
        name:this.formInline.name,
        num:this.formInline.num,
      });
      console.log(res,'mmmmmm');
      this.tableData = res.data.results;
      this.total = res.data.total;
    },
    // 删除
    async handleDelete(row) {
      const res = await asyncDeleteSearchLists("/deleteSearchLists", {
        id: row.id,
      });
      this.getSearchLists();
      if (res.data.code === 200) {
        this.initClassLists();
        ElMessage({
          message: "删除成功",
          type: "success",
        });
      }
    },
  
       // 选中
    // handleSelectionChange(val) {
    //   // 多选删除
    //   console.log(val,'kkk')
    //   // this.multipleSelection = val.map(item=>{
    //   //   return item.id;
    //   // });
    // },
    // // 多选删除
    // async chooseDeleteSearchLists() {
    //   console.log(this.multipleSelection,'ddddd')
    //   const res = await asyncChooseDeleteSearchLists("/moreDel", {
    //     id: this.multipleSelection
    //   });
    //   this.getSearchLists();
    // },
  
  handleSelectionChange(val) {
      // 多选删除
      this.multipleSelection = val;
    },
    // 多选删除
    async chooseDeleteSearchLists() {
      const res = await asyncChooseDeleteSearchLists("/moreDel", {
        multipleSelection: this.multipleSelection,
        pageCode: this.pageCode,
        pageSize: this.pageSize,
      });
      this.getSearchLists();
    },

     searchChange(){
      this.getSearchLists();
     },
    // 分页
    handleSizeChange(val) {
      console.log(val, "44");
      this.pageSize = val;
      this.getSearchLists();
    },
    handleCurrentChange(val) {
      this.pageCode = val;
      console.log(val);
      this.getSearchLists();
    },
  },
};
</script>
<style>
.title-card,
.box-card {
  margin-top: 20px;
}
.card-item {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.btns {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>